<template>
  <div class="content-in">
    <div class="banner">
      <img src="@/assets/images/service/banner01.png" alt="" />
      <div class="header-in">
        <h1>{{ $t('service.title') }}</h1>
        <em class="solid"></em>
        <p>{{ $t('service.banner') }}</p>
        <!-- <div class="btn-box">
          <div class="register">Register</div>
          <div class="sing-in">Sing in</div>
        </div> -->
      </div>
    </div>
    <div class="head-box">
      <h1 class="ft-36">{{ $t('service.subtitle') }}</h1>
      <p class="ft-24">{{ $t('login.tips') }}</p>
    </div>
    <div class="support">
      <h1 class="blue ft-36 tx-center">{{ $t('service.online') }}</h1>
      <div class="flex">
        <div class="flex-1">
          <img
            src="http://bepai-sotenowe.oss.bepai.net/source/on-line/%E4%BA%8C%E7%BB%B4%E7%A0%81.jpg"
            alt=""
          />
          <p>{{ $t('contactUs.wechat') }}</p>
        </div>
        <!-- <div class="flex-1">
          <img src="@/assets/images/service/qrcode.png" alt="" />
          <p>QQ</p>
        </div> -->
      </div>
      <div class="phone" @click="callPhone">
        <img src="@/assets/images/service/dianhua.png" alt="" />
        <span>177-8203-0739</span>
      </div>
      <div class="form">
        <h2>{{ $t('service.download') }}</h2>
        <div class="label">{{ $t('common.search') }}</div>
        <el-input v-model="serialNumber" :placeholder="$t('service.serialNumber')"></el-input>
        <el-button :loading="loading" @click="handleSearch">{{ $t('common.submit') }}</el-button>
        <el-collapse v-if="!!files.length" v-model="activeNames">
          <el-collapse-item
            v-for="(item, index) in files"
            :key="item.id"
            :title="item[`name${capitalizeLang}`]"
            :name="index"
          >
            <el-tabs v-model="fileActiveName[index]">
              <el-tab-pane
                v-for="file in fileTabs"
                :key="file.name"
                :label="file[`label${capitalizeLang}`]"
                :name="file.name"
              >
                <div
                  v-for="(aItem, aIndex) in item.attachment[file.name]"
                  :key="aIndex"
                  class="file-item"
                >
                  <span>{{ aItem.name }}</span>
                  <span class="download" @click="handleDownload(aItem)">
                    {{ $t('service.download') }}
                  </span>
                </div>
                <span
                  v-if="!(item.attachment[file.name] && item.attachment[file.name].length !== 0)"
                  class="grey"
                >
                  {{ lang === 'en' ? 'empty' : '暂无数据' }}
                </span>
              </el-tab-pane>
            </el-tabs>
          </el-collapse-item>
        </el-collapse>
      </div>
      <div class="form">
        <h2>{{ $t('service.repairService') }}</h2>
        <div class="label">{{ $t('service.repair.productRegistry') }}</div>
        <el-input :placeholder="$t('service.repair.placeholder')"></el-input>
        <div class="label">{{ $t('service.repair.warrantyInquiry') }}</div>
        <el-input :placeholder="$t('service.repair.placeholder')"></el-input>
        <div class="label">{{ $t('service.repair.repairRequest') }}</div>
        <el-input :placeholder="$t('service.repair.placeholder')"></el-input>
        <div class="label">{{ $t('service.repair.repairProgress') }}</div>
        <el-input :placeholder="$t('service.repair.placeholder')"></el-input>
        <div class="label">{{ $t('service.repair.authorizedService') }}</div>
        <el-input :placeholder="$t('service.repair.placeholder')"></el-input>
        <div class="label">{{ $t('service.repair.warrantyPolicy') }}</div>
        <el-input :placeholder="$t('service.repair.placeholder')"></el-input>
        <el-button>{{ $t('common.submit') }}</el-button>
      </div>
      <div class="question">
        <h2 class="ft-36 blue">{{ lang === 'zh' ? '常见问题' : 'FAQS' }}</h2>
        <p class="blue ft-24">{{ $t('service.q1') }}</p>
        <p class="ft-24">{{ $t('service.a1') }}</p>
        <p class="blue ft-24">{{ $t('service.q2') }}</p>
        <p class="ft-24">{{ $t('service.a2') }}</p>
        <p class="blue ft-24">{{ $t('service.q3') }}</p>
        <p class="ft-24">{{ $t('service.a3') }}</p>
        <p class="blue ft-24">{{ $t('service.q4') }}</p>
        <p class="ft-24">{{ $t('service.a4') }}</p>
        <p class="blue ft-24">{{ $t('service.q5') }}</p>
        <p class="ft-24">{{ $t('service.a5') }}</p>
        <p class="blue ft-24">{{ $t('service.q6') }}</p>
        <p class="ft-24">{{ $t('service.a6') }}</p>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapGetters } from 'vuex'
import * as api from '@/const/api'

export default {
  data() {
    return {
      fileTabs: [
        {
          labelZh: '产品视频',
          labelEn: 'Product videos',
          name: '1',
        },
        {
          labelZh: '规格书',
          labelEn: 'Datasheet',
          name: '2',
        },
        {
          labelZh: '用户手册',
          labelEn: 'User Manual',
          name: '3',
        },
        {
          labelZh: '集成手册',
          labelEn: 'Integration Manual',
          name: '4',
        },
        {
          labelZh: 'SDK',
          labelEn: 'SDK',
          name: '5',
        },
      ],
      serialNumber: '',
      loading: false,
      activeNames: '0',
      fileActiveName: {},
      files: [],
    }
  },
  computed: {
    ...mapState(['menus', 'lang']),
    ...mapGetters(['capitalizeLang']),
  },
  methods: {
    async handleSearch() {
      try {
        if (!this.serialNumber) {
          this.files = []
          return
        }

        this.loading = true

        this.fileActiveNam = {}
        this.activeNames = '0'

        const { code, msg, data } = await this.$axios.$post(api.attachmentInfoPage, {
          typeZh: this.serialNumber,
        })
        if (+code !== 200) {
          throw new Error(msg || this.$t('common.form.error'))
        }
        this.files = data.list.map((item) => ({
          ...item,
          attachment: JSON.parse(item.attachment),
        }))
        data.list.forEach((_, index) => {
          this.$set(this.fileActiveName, index, '1')
        })
      } catch (err) {
        this.$message.error(err.message)
      } finally {
        this.loading = false
      }
    },
    handleDownload(file) {
      // 获取heads中的filename文件名
      const downloadElement = document.createElement('a')
      // 创建下载的链接
      downloadElement.href = file.response
      downloadElement.target = '_blank'
      // 下载后文件名
      downloadElement.download = file.name
      document.body.appendChild(downloadElement)
      // 点击下载
      downloadElement.click()
      // 下载完成移除元素
      document.body.removeChild(downloadElement)
    },
    callPhone() {
      window.location.href = 'tel:177-8203-0739'
    },
  },
}
</script>

<style lang="less" scoped>
.banner {
  display: flex;
  position: relative;

  img {
    width: 100%;
  }

  .header-in {
    width: 600px;
    height: 529px;
    background-color: rgba(0, 0, 0, 0.5);
    position: absolute;
    left: 0;
    top: 150px;
    padding: 60px 0 0 25px;
    color: #fff;
    word-break: break-word;

    h1 {
      font-size: 30px;
      word-spacing: -2px;
    }

    p {
      font-size: 24px;
      font-weight: 400;
      line-height: 36px;
      padding-right: 50px;
    }

    .solid {
      display: block;
      margin: 16px 0;
      background-color: #5b8ad6;
      height: 1px;
    }

    .btn-box {
      display: flex;
      margin-top: 50px;

      .register {
        width: 170px;
        height: 54px;
        border: 2px solid #0261bc;
        border-radius: 27px;
        text-align: center;
        line-height: 50px;
        cursor: pointer;
        color: #0261bc;
        margin-right: 20px;
      }

      .sing-in {
        width: 170px;
        height: 54px;
        background: #0261bc;
        border-radius: 27px;
        text-align: center;
        line-height: 54px;
        cursor: pointer;
        font-weight: bold;
      }
    }
  }
}

.head-box {
  text-align: center;
  padding: 30px;
}

.support {
  background: #f6f7f9;
  padding: 30px;

  .flex {
    margin-top: 20px;
    justify-content: center;

    .flex-1 {
      text-align: center;
      font-size: 30px;
      font-weight: bold;

      img {
        width: 340px;
        height: 340px;
        margin: 0 auto;
        display: block;
      }
    }
  }

  .phone {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 60px;
    font-size: 40px;
    font-weight: 800;
    color: #333;
    line-height: 68px;

    img {
      width: 44px;
      height: 44px;
      margin-right: 36px;
    }
  }

  .form {
    margin-top: 100px;

    h2 {
      font-size: 36px;
      font-weight: 500;
      color: #0762cb;
    }

    .label {
      font-size: 30px;
      line-height: 90px;
    }

    .el-button {
      width: 344px;
      height: 60px;
      background: #0261bc;
      border-radius: 30px;
      color: #fff;
      border: none;
      line-height: 30px;
      padding: 0;
      margin: 40px auto 0 auto;
      display: block;
    }

    :deep(.el-collapse) {
      margin-top: 20px;

      .el-collapse-item__header {
        padding-left: 16px;
      }
    }

    .file-item {
      display: flex;
      justify-content: space-between;
      padding: 8px;

      .download {
        color: #0261bc;
        cursor: pointer;
      }
    }
  }

  .question {
    margin-top: 90px;
    padding-bottom: 40px;

    h2 {
      margin-bottom: 20px;
    }
  }
}
</style>
